<template>
  <el-table :data="adminList" style="width: 100%">
      <el-table-column prop="adminid" label="管理员编号" width="300" />
      <el-table-column prop="adminname" label="姓名" width="180" />
      <el-table-column prop="role" label="角色" width="180" >
          <template #default="scope">
              <span>{{scope.row.role==1?"超级管理员":"普通管理员"}}</span>
          </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
          <template #default="scope">
              <el-popconfirm title="亲，您真的要删除吗?" @confirm="deleteAdmin(scope.row.adminid)">
                  <template #reference>
                      <el-button >删除</el-button>
                  </template>
              </el-popconfirm>
              <el-button @click="editShowFn(scope.row.adminname)">修改</el-button>
          </template>
      </el-table-column>
  </el-table>

  <Edit v-show="isShowEdit" @hide="hideFn" :adminname="editAdminName" @updatesuccess="successFn" ></Edit>

</template>

<script setup lang="ts">

import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { reactive,ref } from "vue";
import service from "../../../utils/service";
import Edit from "./Edit.vue";


interface IAdmin {
  "adminname": string,
  "password": string,
  "role": number,
  "adminid": string,
  "checkedKeys":string[]
}

const adminList = reactive<IAdmin[]>([]);
const getAdminList = ()=>{
  service({
      url:"/admin/list"
  })
  .then(res=>{
      if(res.data.code==="200"){
          adminList.length = 0;
          adminList.push(...res.data.data);
      }
  })
}

getAdminList();
const deleteAdmin=(adminid:string)=>{
  service({
      url:"/admin/delete",
      method:"post",
      data:{
          adminid
      }
  })
  .then(res=>{
      if(res.data.code==="200"){
          ElMessage({
              message: '删除成功！',
              type: 'success',
          })
          getAdminList();
      }
  })
}
const isShowEdit = ref(false);
const editAdminName = ref("");

const editShowFn=(adminname:string)=>{
  editAdminName.value = adminname;
  isShowEdit.value=true;
}

const hideFn=()=>{
  isShowEdit.value = false;
}
const successFn = ()=>getAdminList();

</script>

<style scoped>
.img {
  width: 200px;
  height: 150px;
}
</style>